<template>
	<div>
		<v-title title="Vue组件化"></v-title>
		<v-button @click="handleClick">点击按钮</v-button>
		<p>
			<img src="./images/image.jpg" start="width:200px;">
		</p>
	</div>
</template>
<script>
	// 导入组件
	import vTitle from './title.vue';
	import vButton from './button.vue';
	
	export default{
		/**
		* ES6语法：
		* vTitle,
		* vButton
		* 等同于
		* vTitle:vTitle,
		* vButton:vButton
		* 对象字面量缩写，当对象的key和value一致时，可以缩写成一个
		*/
		components:{
			vTitle,
			vButton
		},
		methods: {
			handleClick(e){
				console.log(e);
			}
		},
		/**
		 * ES6语法：
		 * data(){}
		 * 等同于
		 * data:function(){}
		 */
		data(){
			return {
				name: 'Vue.js'
			}
		}
	}
</script>
<style scoped>
	div{
		color: #f60;
		font-size: 24px;
	}
</style>